<template>
  <CustomNav title="我的信息"></CustomNav>
  <view class="container">
    <view class="info">
      <view class="logo">
        <button open-type="chooseAvatar" @chooseavatar="handleUploadAvatar">
          <u-image
            :show-loading="true"
            :src="avatarUrl"
            width="200rpx"
            height="200rpx"
          ></u-image>
        </button>
      </view>

      <view class="nickname">{{ nickname }}</view>
    </view>

    <view class="main">
      <view class="inputBox ipt04">
        <view class="text">联系人</view>
        <view class="ipt">
          <view class="input">
            <input
              placeholder="请输入姓名"
              type="number"
              maxlength="11"
              v-model.trim="nickname"
            />
          </view>
        </view>
      </view>
      <view class="inputBox ipt04">
        <view class="text">联系电话</view>
        <view class="ipt">
          <view class="input">
            <input
              placeholder="请输入您的手机号码"
              disabled
              type="number"
              maxlength="11"
              v-model.trim="phone"
            />
          </view>
        </view>
      </view>
    </view>

    <view class="btn">
      <view class="cancel" @click="handleCancel">取消</view>
      <view class="save" @click="handleSave">保存</view>
    </view>
  </view>
</template>

<script setup>
import { onMounted } from "vue";
import CustomNav from "@/components/CustomNav/index.vue";
import { getItem, setItem, updateItem } from "@/utils/localStorage";
import { getToken } from "@/utils/auth";
import env from "@/utils/env";
import { Alert, unAlert } from "@/utils/tool";
import { updateNickname } from "@/api/user";

// 昵称
const nickname = ref("");
// 手机号
const phone = ref("");

onMounted(() => {
  nickname.value = getItem("userInfo").username;
  phone.value = getItem("userInfo").phone;

  avatarUrl.value = getItem("userInfo").headImg;
});

// 头像
const avatarUrl = ref("");

// 更换头像
const handleUploadAvatar = (e) => {
  console.log("e：", e);
  const url = e.detail.avatarUrl;
  uni.uploadFile({
    // url: `${env.baseUrl}/cloth/file/upload?clientId=${getItem("userInfo").id}`,
    url: `https://huayiapp.email/springboot/cloth/client/update/headImg?id=${
      getItem("userInfo").id
    }`,
    fileType: "image",
    filePath: String(url),
    // name: "uploadFile",
    name: "file",
    header: {
      Authorization: getToken(), //携带token
    },
    formData: {
      id: getItem("userInfo").id,
      // uploadFile: String(url),
      file: String(url),
    },
    success(res) {
      let result = JSON.parse(res.data);

      console.log("result:", result.data);

      Alert("更换中...", "loading", 0, true);
      if (result.code == 200) {
        unAlert();
        Alert("更换成功", "success");
        avatarUrl.value = result.data.headImg;
        updateItem("userInfo", "headImg", result.data.headImg);
      }
    },
    complete() {
      // Alert("更换中...", "loading", 0, true);
    },
  });
};

// 取消
const handleCancel = () => {
  uni.navigateBack();
};
// 保存
const handleSave = async () => {
  // 对输入框的姓名进行校验
  if (!nickname.value) {
    Alert("请输入联系人");
    return;
  } else if (nickname.value == getItem("userInfo").username) {
    Alert("联系人不可与之前一致");
    return;
  }

  const result = await updateNickname({
    id: getItem("userInfo").id,
    username: nickname.value,
  });

  if (result.data.code == 200) {
    setItem("userInfo", result.data.data);
    Alert("保存成功", "success", 700, true);
  } else {
    Alert("保存失败", "error", 700, true);
  }

  console.log("result:", result);
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 90vh;
  width: 100vw;
  background-color: #efefef;
  padding: 0 25rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo {
      width: 230rpx;
      height: 230rpx;
      background-color: #fff;
      margin-top: 80rpx;
      padding: 15rpx;
      box-sizing: border-box;

      button {
        width: 100%;
        height: 100%;
        padding: 0;
        background: transparent;
        /*设置背景颜色一致*/
        border-color: transparent;
        /*设置边框颜色一致*/
        display: flex;
        align-items: center;
        justify-content: space-between;

        &::after {
          border: none;
          /*设置边框取消*/
        }
      }
    }

    .nickname {
      font-size: 34rpx;
      font-weight: 700;
      color: #000;
      margin-top: 25rpx;
      margin-bottom: 30rpx;
    }
  }

  .main {
    width: 100%;
    margin-top: 50rpx;

    .inputBox {
      width: 100%;
      display: flex;
      align-items: center;
      border: 1px solid #fbda97;
      border-radius: 12rpx;
      padding: 28rpx 55rpx;
      padding-right: 0;
      margin-bottom: 16rpx;
      background-color: #fff;

      .text {
        width: 130rpx;
      }

      .ipt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        padding-left: 30rpx;
        padding-right: 40rpx;

        .input {
          flex: 1;

          input {
            font-size: 28rpx;
            color: #9b9b9b;
          }
        }
      }
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 70rpx;

    view {
      width: 200rpx;
      height: 80rpx;
      border-radius: 16rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
    }

    .cancel {
      background-color: #bbbbbb;
      margin-right: 50rpx;
    }

    .save {
      background-color: #ffb61e;
      margin-left: 50rpx;
    }
  }
}
</style>
